import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:portal_website/pages/common_header.dart';

class NetworkSecurityPage extends StatelessWidget {
  const NetworkSecurityPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 50),
          child: Column(
            children: [
              // 头部导航

              // 内容容器
              Container(
                width: double.infinity,
                constraints: BoxConstraints(
                  maxWidth: 1200,
                ),
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Breadcrumb(text: "首页 > 服务平台 > 网络安全"),

                    PageTitle(
                        title: "网络安全", subtitle: "全方位网络安全解决方案，保护您的数字资产安全"),

                    // 网络安全介绍
                    _buildIntroSection(),

                    // 安全威胁
                    _buildThreatsSection(),

                    // 解决方案
                    _buildSolutionsSection(),

                    // 安全服务
                    _buildServicesSection(),

                    // 案例展示
                    _buildCasesSection(),
                  ],
                ),
              ),

              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  // 头部导航
  Widget _buildHeader() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          stops: [0.0, 1.0],
        ),
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(8),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 2,
            offset: Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 1200),
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              '创新服务平台',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            MediaQuery.of(Get.context!).size.width > 768
                ? _buildDesktopNav()
                : _buildMobileNav(),
          ],
        ),
      ),
    );
  }

  // 桌面导航
  Widget _buildDesktopNav() {
    return Row(
      children: [
        _buildNavItem('首页'),
        _buildNavItem('网络安全'),
        _buildNavItem('安全服务'),
        _buildNavItem('解决方案'),
        _buildNavItem('联系我们'),
      ],
    );
  }

  // 移动端导航
  Widget _buildMobileNav() {
    return PopupMenuButton<String>(
      icon: const Icon(Icons.menu, color: Colors.white),
      itemBuilder: (context) => [
        const PopupMenuItem(value: '1', child: Text('首页')),
        const PopupMenuItem(value: '2', child: Text('网络安全')),
        const PopupMenuItem(value: '3', child: Text('安全服务')),
        const PopupMenuItem(value: '4', child: Text('解决方案')),
        const PopupMenuItem(value: '5', child: Text('联系我们')),
      ],
    );
  }

  // 导航项
  Widget _buildNavItem(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: TextButton(
        onPressed: () {},
        style: TextButton.styleFrom(
          padding: EdgeInsets.zero,
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
        child: Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 16,
          ),
        ),
      ),
    );
  }

  // 面包屑导航
  Widget _buildBreadcrumb() {
    return const Padding(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Text(
        '首页 > 服务平台 > 网络安全',
        style: TextStyle(
          color: Color(0xFF666666),
          fontSize: 14,
        ),
      ),
    );
  }

  // 网络安全介绍
  Widget _buildIntroSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        children: [
          MediaQuery.of(Get.context!).size.width > 768
              ? Row(
                  children: [
                    Expanded(child: _buildIntroText()),
                    const SizedBox(width: 40),
                    _buildIntroImage(),
                  ],
                )
              : Column(
                  children: [
                    _buildIntroText(),
                    const SizedBox(height: 20),
                    _buildIntroImage(),
                  ],
                ),
        ],
      ),
    );
  }

  // 介绍文本
  Widget _buildIntroText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          '网络安全概述',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '在数字化时代，网络安全已成为企业和个人不可忽视的重要议题。随着网络攻击手段的不断升级，网络威胁呈现出多样化、复杂化的趋势。我们的网络安全服务旨在帮助客户构建全方位的安全防护体系，抵御各类网络威胁。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '我们拥有一支由安全专家组成的专业团队，采用国际先进的安全技术和工具，为客户提供从风险评估、安全防护到应急响应的一站式安全服务。服务范围涵盖网络安全、数据安全、应用安全、终端安全等多个领域。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '平台已为金融、政府、医疗、教育等多个行业的客户提供了专业的安全服务，成功防御了数千次网络攻击，客户满意度达98%。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  // 介绍图片
  Widget _buildIntroImage() {
    return Container(
      width: 500,
      height: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.grey[200],
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 2,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: const Center(
        child: Text(
          '网络安全',
          style: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }

  // 安全威胁部分
  Widget _buildThreatsSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('常见网络安全威胁'),
          const SizedBox(height: 10),
          const Text(
            '了解网络安全威胁是构建有效防护的第一步',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildThreatsGrid(),
        ],
      ),
    );
  }

  // 威胁网格
  Widget _buildThreatsGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 3 : 1,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 1.0,
      children: [
        _buildThreatCard('🦠', '恶意软件', '包括病毒、蠕虫、特洛伊木马、勒索软件等，能够破坏系统、窃取数据或勒索钱财。'),
        _buildThreatCard('📧', '网络钓鱼', '通过伪装成可信来源的电子邮件或网站，诱骗用户泄露敏感信息。'),
        _buildThreatCard('🔓', '数据泄露', '敏感数据被未经授权的个人或组织获取，可能导致重大经济损失和声誉损害。'),
        _buildThreatCard('💻', 'DDoS攻击', '分布式拒绝服务攻击，通过大量请求使目标系统瘫痪，无法提供正常服务。'),
        _buildThreatCard('👤', '内部威胁', '来自组织内部的恶意行为或疏忽，可能导致数据泄露或系统破坏。'),
        _buildThreatCard('📱', '移动安全威胁', '针对移动设备的恶意应用、不安全的Wi-Fi连接等威胁。'),
      ],
    );
  }

  // 威胁卡片
  Widget _buildThreatCard(String icon, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
      ),
      padding: const EdgeInsets.all(30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 40),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 15),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 15,
              height: 1.7,
            ),
          ),
        ],
      ),
    );
  }

  // 解决方案部分
  Widget _buildSolutionsSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('网络安全解决方案'),
          const SizedBox(height: 10),
          const Text(
            '针对不同安全威胁的专业解决方案',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          Column(
            children: [
              _buildSolutionItem(
                '防火墙',
                '边界安全防护',
                '部署下一代防火墙、入侵防御系统(IPS)和Web应用防火墙(WAF)，构建企业网络边界安全防护体系。通过深度包检测、行为分析和威胁情报，有效防御外部网络攻击。',
                '方案特点：实时威胁检测、多层防护、智能分析',
                '适用场景：企业网络边界防护、数据中心安全防护',
              ),
              _buildSolutionItem(
                '数据加密',
                '数据安全保护',
                '采用加密技术、数据防泄露(DLP)和权限管理系统，保护企业核心数据资产安全。实现数据存储加密、传输加密和使用管控，防止数据泄露和滥用。',
                '方案特点：全生命周期保护、细粒度权限控制、合规审计',
                '适用场景：敏感数据保护、合规性要求高的行业',
              ),
              _buildSolutionItem(
                '终端安全',
                '终端安全管理',
                '部署终端检测与响应(EDR)系统，实现终端设备的统一安全管理。包括病毒防护、漏洞修复、设备管控等功能，保护终端设备免受恶意软件和攻击。',
                '方案特点：集中管理、实时防护、行为监控',
                '适用场景：企业办公终端、移动设备安全管理',
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 解决方案项
  Widget _buildSolutionItem(String imageText, String title, String desc1,
      String desc2, String desc3) {
    return Column(
      children: [
        MediaQuery.of(Get.context!).size.width > 768
            ? Row(
                children: [
                  _buildSolutionImage(imageText),
                  const SizedBox(width: 30),
                  Expanded(
                      child: _buildSolutionContent(title, desc1, desc2, desc3)),
                ],
              )
            : Column(
                children: [
                  _buildSolutionImage(imageText),
                  const SizedBox(height: 20),
                  _buildSolutionContent(title, desc1, desc2, desc3),
                ],
              ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 15),
          child: Divider(
            color: Color(0xFFE0E9FF),
            height: 1,
            thickness: 1,
          ),
        ),
      ],
    );
  }

  // 解决方案图片
  Widget _buildSolutionImage(String text) {
    return Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.grey[200],
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 1,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(color: Colors.grey),
        ),
      ),
    );
  }

  // 解决方案内容
  Widget _buildSolutionContent(
      String title, String desc1, String desc2, String desc3) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Text(
          desc1,
          style: const TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 15),
        Text(
          desc2,
          style: const TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 15),
        Text(
          desc3,
          style: const TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  // 安全服务部分
  Widget _buildServicesSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('安全服务'),
          const SizedBox(height: 10),
          const Text(
            '全方位的网络安全服务，满足不同安全需求',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildServicesGrid(),
        ],
      ),
    );
  }

  // 服务网格
  Widget _buildServicesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 3 : 2,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 1.0,
      children: [
        _buildServiceCard('🔍', '安全评估', '全面评估企业网络安全状况，识别潜在风险和安全漏洞。'),
        _buildServiceCard('🛡️', '渗透测试', '模拟黑客攻击，测试系统安全防护能力，发现安全弱点。'),
        _buildServiceCard('📝', '安全咨询', '提供安全策略、安全架构和安全管理的专业咨询服务。'),
        _buildServiceCard('🚨', '应急响应', '在发生安全事件时提供快速响应和处置服务，降低损失。'),
        _buildServiceCard('🔐', '安全培训', '提供安全意识培训和技术培训，提升员工安全技能。'),
        _buildServiceCard('📊', '安全运维', '提供安全设备的日常运维和监控服务，确保安全防护持续有效。'),
      ],
    );
  }

  // 服务卡片
  Widget _buildServiceCard(String icon, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
      ),
      padding: const EdgeInsets.all(30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 48),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 15),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  // 案例展示部分
  Widget _buildCasesSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('成功案例'),
          const SizedBox(height: 10),
          const Text(
            '我们已为众多企业提供了专业的网络安全服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildCasesGrid(),
        ],
      ),
    );
  }

  // 案例网格
  Widget _buildCasesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 3 : 1,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 300 / 330,
      children: [
        _buildCaseCard(
            '金融安全', '某银行网络安全加固', '为该银行提供全面的网络安全评估和加固服务，成功防御多次高级持续性威胁(APT)攻击。'),
        _buildCaseCard('医疗数据', '医院数据安全保护', '为三甲医院构建数据安全防护体系，实现患者隐私数据的全方位保护。'),
        _buildCaseCard('制造企业', '制造企业安全防护', '为制造企业部署工业控制系统安全解决方案，保障生产系统安全稳定运行。'),
      ],
    );
  }

  // 案例卡片
  Widget _buildCaseCard(String imageText, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 1,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey[200],
              child: Center(
                child: Text(
                  imageText,
                  style: const TextStyle(color: Colors.grey),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              padding: const EdgeInsets.all(20),
              color: Colors.white,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      color: Color(0xFF1E5799),
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Text(
                    description,
                    style: const TextStyle(
                      color: Color(0xFF666666),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(
                      padding: EdgeInsets.zero,
                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    ),
                    child: const Text(
                      '查看详情 →',
                      style: TextStyle(
                        color: Color(0xFF207CCA),
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 页脚
  Widget _buildFooter() {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(8),
        ),
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(top: 50),
      child: Column(
        children: [
          // 页脚链接
          Wrap(
            alignment: WrapAlignment.center,
            spacing: 40,
            children: [
              _buildFooterLink('关于我们'),
              _buildFooterLink('服务条款'),
              _buildFooterLink('隐私政策'),
              _buildFooterLink('帮助中心'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：security@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  // 页脚链接
  Widget _buildFooterLink(String text) {
    return TextButton(
      onPressed: () {},
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }

  // 通用的章节标题
  Widget _buildSectionTitle(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Container(
          height: 2,
          width: double.infinity,
          color: const Color(0xFFF0F0F0),
          child: FractionallySizedBox(
            widthFactor: 80 / 1200, // 80px宽度相对于1200px容器
            child: Container(
              color: const Color(0xFF207CCA),
            ),
          ),
        ),
      ],
    );
  }
}
